<template>
  <div>
 <!-- 头部navbar -->
<van-nav-bar title="购物车" fixed :right-text="btnname" @click-right="onClickRight" >
</van-nav-bar>

<van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh" >
  <!-- 加载提示 -->
  <template #loading>
   <van-loading />
   <van-loading type="spinner" />
  </template>

  <!-- 空白栏 -->
<div class="Kong" v-if='isShow' >您的购物车没有商品</div>

<!-- 商品列表 -->
<van-list
v-else-if="!isShow"
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
<van-swipe-cell v-for="item in this.Goodslist" :key="item.id">
 <van-card
  :price="item.shop.price*item.num"
  :desc="item.shop.content"
  :title="item.shop.title"
  :thumb="item.shop.photo"
  >
  >
   <template #tags>
    <van-tag plain type="danger">{{ item.size }}键</van-tag>
    <!-- <van-tag plain type="danger">{{ item.zhou }}</van-tag> -->
  </template>
 <template #tag>
    <van-checkbox v-model="item.state" :icon-size="iconsize"></van-checkbox>
  </template>
   <template #num>
    <van-button size="mini" @click ='item.num > 1 && item.num--'>-</van-button>
    <input type="number" class=".inp" v-model.number="item.num" max="999">
    <van-button size="mini" @click ='item.num++'>+</van-button>
  </template>
</van-card>
<template #right>
    <van-button square text="删除" type="danger" class="delete-button" @click="delcommodity(item.id)" />
  </template>
</van-swipe-cell>
</van-list>

</van-pull-refresh>
 <!-- 底部结算 -->
<van-submit-bar
 v-show="!isShow"
 :price="allprice"
 :button-text='deleteall'
 button-color='black'
 button-type='default'
 @submit="onSubmit"
 >
  <van-checkbox v-model="isAll">全选</van-checkbox>
</van-submit-bar>

  </div>
</template>

<script>
import { getShopCarList, deleteShopCarList } from '@/api/shopcar.js'
// import { getUserinfo } from '@/api/user.js'
export default {
  data () {
    return {
      Goodslist: [],
      loading: false,
      isLoading: false,
      finished: false,
      btnname: '编辑',
      deleteall: '结算',
      iconsize: '0.4rem',
      isShow: false
    }
  },
  created () {
    this.onLoad()
    // if (this.isShow) {
    //   this.btnname = ''
    // }
  },
  methods: {
    // 获取购物车列表
    async onLoad () {
      try {
        const id = this.$store.state.user.UserInfo.id
        const a = await getShopCarList({ userId: id })
        if (a.status === 200 && a.data.length !== 0) {
          this.loading = false
          this.finished = true
          this.isShow = false
          this.Goodslist = a.data
        } else {
          this.loading = false
          this.finished = true
          this.isShow = true
          this.btnname = ''
        }
      } catch (error) {
        console.log('获取购物车列表失败', error)
      }
    },
    // 移除购物车
    async delcommodity (id) {
      const shangpin = await deleteShopCarList({ id: id })
      console.log(shangpin)
      this.onLoad()
    },
    // 下拉刷新
    onRefresh () {
      console.log('重新调用一次获取购物车商品信息')
      this.onLoad()
      if (this.Goodslist.length !== 0) {
        setTimeout(() => {
          console.log('刷新成功')
          this.isLoading = false
        }, 1000)
      }
    },
    // 点击编辑按钮
    onClickRight () {
      if (this.btnname === '编辑' && this.deleteall === '结算') {
        this.Goodslist.forEach((obj) => (obj.state = false))
        this.btnname = '完成'
        this.deleteall = '批量删除'
      } else {
        this.btnname = '编辑'
        this.deleteall = '结算'
      }
    },
    // 全选影响所有的单选
    allfn (val) {
      this.Goodslist.forEach((obj) => (obj.state = val))
    },
    // 点击结算按钮路由跳转动态传参 或者点击批量删除按钮 删除购物车数据
    onSubmit () {
      if (this.deleteall === '结算') {
        if (this.allprice !== 0) {
          const addGoodlist = this.Goodslist.filter(obj => obj.state === true).map(obj => {
            return {
              id: obj.id,
              num: obj.num
            }
          })
          console.log(addGoodlist)
          this.$router.push({
            name: 'Settlement',
            params: {
              id: addGoodlist
            }
          })
        } else {
          this.$toast('请先选好需要购买的商品')
        }
      } else {
        const delGoodlistid = this.Goodslist.filter(obj => obj.state === true).map(obj => obj.id)
        if (delGoodlistid.length === 0) {
          this.$toast('请选择需要删除的商品')
        } else {
          this.delcommodity(delGoodlistid)
        }
      }
    }
  },
  watch: {
    // 深度监听商品列表里每个商品对象的数量
    Goodslist: {
      deep: true,
      handler () {
        this.Goodslist.forEach(v => {
          if (v.num < 1) {
            v.num = 1
          }
        })
      }
    }
  },
  computed: {
    // 全选checked
    isAll: {
      set (value) {
        // console.log(value)
        // 把全选按钮的checked调用这个方法给每个商品的checked都绑定全选的checked
        this.allfn(value)
      },
      get () {
        // 如果所有单选有一个不为true 那么全选不为true
        return this.Goodslist.every(obj => obj.state === true)
      }
    },
    // 遍历里每个商品的价格 如果是被选中的状态那么相加保存在sum里 最后返回给allprice计算属性
    allprice () {
      let sum = 0
      this.Goodslist.forEach((obj) => {
        if (obj.state) {
          sum += obj.shop.price * obj.num
        }
      })
      return sum * 100
    }
  }
}
</script>

<style lang='less' scoped>
/deep/ .van-nav-bar__content {
  position: relative;
  top: 0;
  left: 0;
  height: 50px;
  .van-nav-bar__title{
    font-size: 20px;
    font-weight: 700;
  }
  span.van-nav-bar__text {
    font-size: 14px;
    color: black;
   }
}
.Kong{
  width: 100%;
  height: 90vh;
  font-size: 16px;
  text-align: center;
  line-height: 65vh;
  background-color: #f2f2f2;
  color: #646464;
}
.van-pull-refresh{
  height: 100vh;
   background-color: #f2f2f2;
  color: #646464;
 margin-top: 50px;
.van-list{
  background-color: #f2f2f2;
  margin-bottom: 50px;
  .van-checkbox{
      position: absolute;
      top: 40px;
      left: -16px;
  }
  input {
    width: 10px;
  }
  .van-button{
    margin: 3px;
    width: 18px;
  }
  .van-card__title{
    font-weight: 700;
  }
  .van-card__price{
    color: #ee0a24;
  }
  .goods-card {
    margin: 0;
    background-color: white;
  }

  .delete-button {
    height: 100%;
  }
}
}
.van-submit-bar__bar{
  height: 50px;
  margin-bottom: 50px;
  background-color:#faf3f3;
}
</style>
